<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品分类</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/classify .css" />
  </head>
  <body>
    <div id="app">
      <!-- 头部 -->
      <header>
        <div class="title">
          <p>智慧商城</p>
        </div>
        <div class="search">
          <a href="#">
            <!-- <input type="search" /> -->
            <i class="iconfont icon-sousuo"></i>
            <p>搜索商品</p>
          </a>
        </div>
      </header>

      <!-- 主体 -->
      <div class="main">
        <div class="left_list">
          <div
            class="left_item"
            v-for="(item,index) in left"
            :key="item.category_id"
            @click="activeIndex=index,change()"
            :class="{active:activeIndex===index}"
          >
            <p>{{item.name}}</p>
          </div>
        </div>
        <div class="right_pic">
          <div class="right_sc">
            <div class="right_item" v-for="(item,index) in right">
              <img :src="item.image.external_url" alt="" />
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <footer>
        <a href="./index 1.html" class="link1">
          <i class="iconfont icon-shouye-zhihui"></i>
          <p>首页</p>
        </a>
        <a href="./classify.html" class="active link2">
          <i class="iconfont icon-fenlei"></i>
          <p>分类</p>
        </a>
        <a href="./shop.html" class="link3">
          <i class="iconfont icon-31gouwuche"></i>
          <p>购物车</p>
        </a>
        <a href="./my.html" class="link4">
          <i class="iconfont icon-wode"></i>
          <p>我的</p>
        </a>
      </footer>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/common.js"></script>
    <script src="./vue-js/classify.js"></script>
  </body>
</html>
